<template>
    <div class="select-item">
        <div class="title">{{ title }}</div>
        <ul class="list">
            <li v-for="item in options" :key="item.value" class="item g-line-1" :class="{ active: actived === item.value }" @click="handleChange(item.value)">
                {{ item.label }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'FilterSelect',
    props: {
        options: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        value: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            actived: null
        }
    },
    watch: {
        value(newValue) {
            if (!newValue) {
                this.actived = null
            }
        }
    },
    methods: {
        handleChange(value) {
            this.actived = this.actived === value ? '' : value
            this.$emit('update:value', this.actived)
        }
    }
}
</script>

<style scoped lang="scss">
.select-item {
    border: 1px solid #dcdfe6;
    width: 220px;
    .list {
        // height: 130px;
        font-size: 14px;
    }
    .title {
        margin-bottom: 8px;
        padding: 8px;
        font-weight: bold;
        text-align: center;
    }
    .item {
        padding: 4px 16px;
        cursor: pointer;
        text-align: center;
        &:hover,
        &.active {
            background-color: rgba(0, 98, 255, 0.06);
        }
    }
}
</style>
